<template>
  <div class="photoinfo-container">
      <h1>{{ photoList.title }}</h1>
      <p class="subtitle">
        <span>发表时间:{{ photoList.add_time }}</span>
        <span>点击次数:{{ photoList.click }}</span>
      </p>
      <hr>
      <!-- 页面内容部分，需要引入插件 vue-preview -->
      <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="index">
      <!-- 图片内容区 -->
      <div class="content" v-html="photoList.content"></div>
      <!-- 引入评论组件 -->
      <cmt></cmt>
  </div>
</template>

<script>
import cmt from '../comment/cmt'
export default {
   data () {
      return {
        id: this.$route.params.id,
        list: [],
        photoList: {}
      }
    },
    created(){
      this.getPhotoInfo();
      this.getthumimages();
    },
    methods:{
      getPhotoInfo(){
        this.$http.get('api/getimageInfo/' + this.id).then(result => {
          if(result.body.status === 0) {
            this.photoList = result.body.message[0];
          }
        })
      },
      getthumimages(){
        this.$http.get('api/getthumimages/' + this.id).then(result => {
          // console.log(result.body);
          if(result.body.status === 0) {
            result.body.message.forEach(item => {
              var img = new Image();
              img.src = item.src;
              img.onload = function() {
                item.w = img.width;
                item.h = img.height;
              } 
            })
            this.list = result.body.message;
          }
        })
      }
    },
    components: {
      cmt
    }
}
</script>

<style lang="less" scoped>
  .photoinfo-container {
    padding: 4px;
    h1 {
      font-size: 14px;
      text-align: center;
    }
    .subtitle {
      display: flex;
      justify-content: space-between;
      color: skyblue;
      margin: 0;
    }
    hr {
      margin: 0;
    }
    img {
      width: 33.333333%;
    }
    .content {
      font-size: 12px;
    }
  }
</style>


